<template>
    <Cascader v-if="questionTypeList.length>0" style="width:300px;" :data="questionTypeList" trigger="click" @on-change="changeQuestiontype" :disabled="disabled"></Cascader>
</template>
<script>
    import configService from 'service/configService.js'
    export default {
        name: 'questionTypeList',
        props: {
            disabled: Boolean
        },
        data() {
            return {
                questionTypeList: []
            }
        },
        created() {
            this.getQuestionList()
        },
        methods: {
            async getQuestionList() {
                try {
                    let questionList = await configService.getQuestionTypeList()
                    let data = this.recursive(questionList.children)
                    this.questionTypeList = data
                } catch (e) {

                }

            },
            recursive(data) {
                let result = [],
                    temp
                if (Array.isArray(data) && data.length > 0) {
                    data.map((val, i) => {
                        val.value = val.attributes.serviceName
                        val.label = val.attributes.serviceName
                        if (Array.isArray(val.children) && val.children.length > 0) {
                            temp = this.recursive(val.children)
                            if (temp.length > 0) {
                                val.children = temp
                            }
                            result.push(val)
                        } else {
                            val.children = []
                            result.push(val)
                        }
                    })

                }
                return result
            },
            changeQuestiontype(questionArr, selectedData) {
                let data = {
                    'value': questionArr,
                    'selectedData': selectedData
                }
                this.$emit('changeQuestionType', data)
            }
        }
    }
</script>